<template>
    <div class="box">
        <div class="card-container">
            <el-row :gutter="10">
                <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="100px">
                    <el-col :span="19" :offset="0">

                        <el-form-item label="软件版本" prop="version">
                            <el-input v-model="queryParams.version" placeholder="请输入版本" clearable size="small"
                                @keyup.enter.native="handleQuery" />
                        </el-form-item>

                        <el-form-item label="是否启用" prop="isEnable">
                            <el-select v-model="queryParams.isEnable" placeholder="请选择是否启用" clearable size="small">
                                <el-option v-for="dict in dict.type.sys_normal_disable" :key="dict.value"
                                    :label="dict.label" :value="dict.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="5" :offset="0">
                        <el-form-item>
                            <el-button icon="el-icon-search" size="mini" @click="handleQuery">搜索
                            </el-button>
                            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                        </el-form-item>
                    </el-col>
                </el-form>
            </el-row>
        </div>
        <div class="card-container">
            <div class="body-title">
                <div class="body-title-left">
                    APP管理
                </div>
                <div class="body-title-right">
                    <el-button icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
                    <el-button icon="el-icon-delete" size="mini" :disabled="multiple" v-show="!multiple"
                        @click="handleDelete">删除</el-button>
                </div>
            </div>
            <el-table v-loading="loading" height="500" ref="table" :data="versionList" :row-key="getRowKeys"
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" :selectable="checkSelectable" width="55" :reserve-selection="true"
                    align="center" />
                <el-table-column label="软件版本" align="center" prop="version" />
                <el-table-column label="版本说明" align="center" prop="versionDesc">
                    <template slot-scope="scope">
                        <span>{{ scope.row.desc || "暂无" }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="发布时间" align="center" prop="createTime" min-width="130">
                    <template slot-scope="scope">
                        <span>{{ scope.row.createTime }}</span>
                    </template>
                </el-table-column>
                <el-table-column min-width="70" label="是否启用" align="center" prop="isEnable">
                    <template slot-scope="scope">
                        <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.isEnable" />
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" min-width="120" class-name="small-padding fixed-width">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text" @click="handleUpdate(scope.row)">
                            编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize" @pagination="getList" />
        </div>

        <!-- 添加或修改设备版本对话框 -->
        <el-dialog :title="title" :close-on-click-modal="false" :visible.sync="open" width="500px" append-to-body>
            <div class="card-container">
                <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                    <el-form-item label="软件版本" prop="version">
                        <el-input v-model="form.version" maxlength="20" placeholder="请输入软件版本" />
                    </el-form-item>
                    <el-form-item label="版本说明" prop="versionDesc">
                        <el-input v-model="form.versionDesc" type="textarea" maxlength="100" placeholder="请输入版本说明" />
                    </el-form-item>
                    <el-form-item label="下载地址" required true prop="downloadUrl">
                        <el-input v-model="form.downloadUrl" type="text" @blur="handleLoadurl" :disabled="isurl"
                            placeholder="请输入下载地址" />
                    </el-form-item>
                    <el-form-item label="是否启用" prop="isEnable">
                        <el-radio-group v-model="form.isEnable">
                            <el-radio v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.value">{{
                                dict.label
                            }}</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-form>

            </div>
            <div slot="footer" class="dialog-footer">
                <el-button :loading="buttonLoad" @click="submitForm">提 交</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>

    </div>
</template>
  
<script>
import {
    getAppVersionList,
    getAppVersionInfo,
    addAppVersion,
    updateAppVersion,
    delAppVersion
} from "@/api/appManage/index.js";
// import updateLog from "./updateLog.vue";
// import updateFail from "./updateFail.vue";
// import updatePush from "./updatePush.vue";
// import pushSchedule from "./pushSchedule.vue";
export default {
    name: "Version",
    dicts: ["sys_file_type", "sys_update_mode", "sys_normal_disable"],
    data() {
        return {
            isurl: false,
            isupload: false,
            buttonLoad: false,
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            // showSearch: true,
            // 总条数
            total: 0,
            // 设备版本表格数据
            versionList: [],
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                version: null,
                isEnable: null,
            },
            isEdit: true,
            // 表单参数
            form: {},
            // 表单校验
            rules: {
                version: [
                    { required: true, message: "软件版本不能为空", trigger: "blur", },
                ],
                downloadUrl: [
                    { required: true, message: "下载地址不能为空", trigger: "blur", },
                ]
            },
        };
    },
    created() {
        this.getList();
    },
    activated() {
        this.getList();
    },
    methods: {

        checkSelectable(row) {
            // console.log(row.upgradeCount <= 0,"row")
            // return row.upgradeCount <= 0;
            return true
        },

        getRowKeys(row) {
            return row.id;
        },



        handleLoadurl() {
            if (this.form.versionDowmloadUrl) {
                this.isupload = true
            } else {
                this.isupload = false
            }
        },
        /** 查询设备版本列表 */
        getList() {
            this.loading = true;
            getAppVersionList(this.queryParams).then((response) => {
                this.versionList = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        // 表单重置
        reset() {
            this.form = {
                version: null,
                versionDesc: null,
                downloadUrl: null,
                isEnable: "0",
            }
            this.resetForm("form");
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.$forceUpdate();
            this.handleQuery();
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map((item) => item.versionId);
            this.single = selection.length !== 1;
            this.multiple = !selection.length;
        },
        /** 新增按钮操作 */
        async handleAdd() {
            this.reset();
            this.isurl = false
            this.isupload = false
            // this.getMode();
            this.buttonLoad = false;
            this.open = true;
            this.isEdit = false;
            this.title = "新增";
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
            this.reset();
            this.form = row;
            this.buttonLoad = false;
            this.open = true;
            this.title = "编辑";
        },

        /** 提交按钮 */
        submitForm() {
            this.$refs["form"].validate(async (valid) => {
                if (valid) {
                    if (this.title == '编辑') {
                        updateAppVersion(this.form).then((response) => {
                            this.$modal.msgSuccess("修改成功");
                            this.open = false;
                            this.getList();
                        });
                    } else {
                        this.buttonLoad = true;
                        addAppVersion(this.form).then((response) => {
                            this.$modal.msgSuccess("新增成功");
                            this.buttonLoad = false;
                            this.open = false;
                            this.getList();
                        });
                    }
                }
            });
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            const versionIds = row.versionId || this.ids;
            this.$modal
                .confirm('是否确认删除设备版本编号为"' + versionIds + '"的数据项？')
                .then(function () {
                    return delAppVersion(versionIds);
                })
                .then(() => {
                    this.$refs.table.clearSelection();
                    this.getList();
                    this.$modal.msgSuccess("删除成功");
                })
                .catch(() => { });
        },
    },
};
</script>
  
<style lang="scss" scoped>
.box {
    width: 100%;
    height: 100%;
    padding: 20px;
}


.body-title {
    display: flex;
    position: relative;
    // justify-content: space-between;
    align-items: center;
}

.body-title-left {
    display: flex;
    height: 100%;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 600;
    color: #fff;
    line-height: 64px;
}

.body-title-right {
    position: absolute;
    right: 0;
}

.header-button {
    display: flex;
    align-items: center;
    margin-left: 30px;

    >div {
        width: 80px;
        height: 28px;
        text-align: center;
        margin-bottom: 0px;
        line-height: 28px;
        cursor: pointer;
        border: 1px solid #dcdfe6;
        box-sizing: border-box;
        font-size: 14px;
        font-weight: 400;
    }

    >div:nth-child(1) {
        border-right-width: 0px;
        border-top-left-radius: 3px;
        border-bottom-left-radius: 3px;
    }

    >div:nth-child(2) {
        border-left-width: 0px;
        border-top-right-radius: 3px;
        border-bottom-right-radius: 3px;
    }

    .true {
        border: 1px solid #409eff !important;
        color: #409eff;
    }
}
</style>
  